require("../css/commCss/normalize.less");
require("../css/commCss/reset.less");
require("../css/commCss/property.less");
require("../css/commCss/basic.less");
require("../fonts/iconfont.css");
require("../css/curse.less");

//导入util
const util = require("../util/util");

//axios
const axios = require("axios");

document.addEventListener("DOMContentLoaded", function () {
  /* 获取元素 */
  const imgurl=document.querySelector('#imgurl')
  const name=document.querySelector('#name')
  const desc=document.querySelector('#desc')
  const courseList=document.querySelector('#courseList')//ul
  const cuImg=document.querySelector('.cu-img')//最新课程

  /*1. 头部导航 */
  util.soprtTopNav("curse");

  /*2. 底部导航 */
  util.fixBottomNav("running");


  //3.获取课程数据
  axios.get("http://139.9.177.51:8099/sports/allcourse")
  .then(function(res){
    // console.log(res.data.data);
    let data=res.data.data;

    //筛选出最新课程--latest==1
    let newCourse=data.filter(function(v){
        return v.latest==1
      })

    //筛选出课程--latest==0
    let norCourse = data.filter(function(v){
        return v.latest==0
      })

    // console.log(newCourse);

    //渲染最新课程数据--单渲染
      imgurl.src='http://139.9.177.51:8099'+newCourse[0].imgurl
      name.textContent=newCourse[0].name
      desc.textContent=newCourse[0].desc
      //添加自定义属性
      cuImg.dataset['cid']=newCourse[0].courseId

    //渲染课程数据--多渲染
      let courseArr=  norCourse.map(function(v){
          return `
          <li data-cid=${v.courseId}>
            <img src="http://139.9.177.51:8099${v.imgurl}" alt="">
            <div> 
              <p>${v.name}</p>
              <span>${v.desc}</span>
            </div>
          </li>
          `
    })

    //渲染到页面中
    courseList.innerHTML=courseArr.join('')
  })

  
  /* 4.点击最新课程，跳转(AB页面传递参数) */
  cuImg.addEventListener('click',function(){
    //获取自定义属性的值
    let cid=this.dataset.cid;
    // console.log(cid);

    //把它存储到会话存储中
    sessionStorage.cid=cid

    //跳转页面
    location.href='./introduction.html'
  })


  /* 5.点击课程，跳转页面(AB页面传递参数) ,事件委派*/
  courseList.addEventListener('click',function(e){ 
    // console.log(e.target.closest("li"));//获取li
    //获取自定义属性 closest向上查找
    let cid=e.target.closest("li").dataset.cid
    
    //把它存储到会话存储中
    // sessionStorage.setItem('course',cid)
    sessionStorage.cid=cid

    //跳转页面
    location.href='./introduction.html'
  })


});